<template>
  <div>
    <Row class="banner">
      <h1>合规性风险</h1>
      <h2>对贵阳市消防支队流程过程中的合规风险进行感知</h2>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="6">
        <Card>
          <p slot="title">
            <span>事项合规率</span>
          </p>
          <div class="chart" id="chart-legal-rate"></div>
          <Divider />
          <span class="text">合规事项总量：{{legalCount}}项</span>
          <Spin fix size="large" v-show="loading.legalRate"></Spin>
        </Card>
      </Col>
      <Col span="18">
        <Card>
          <p slot="title">
            <span>合规性风险一览表</span>
          </p>
          <Table :columns="tableColumns" :data="tableData"></Table>
          <Divider />
          <Page show-evelator :total="pageCount" :page-size="pageSize" @on-change="renderTable"></Page>
          <Spin fix size="large" v-show="loading.table"></Spin>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "",
  data() {
    return {
      loading: {
        legalRate: false,
        table: false
      },
      option: {
        legalRate: null
      },
      legalCount: 0,
      tableColumns: [
        {
          title: "序号",
          key: "index",
          align: "center",
          width: 80
        },
        {
          title: "风险原因",
          key: "riskReason",
          align: "center"
        },
        {
          title: "所在系统",
          key: "systemName",
          align: "center"
        },
        {
          title: "发现时间",
          key: "discoverTime",
          align: "center"
        },
        {
          title: "责任人",
          key: "chargerName",
          align: "center",
          width: 180
        },
        {
          title: "所属部门",
          key: "depName",
          align: "center"
        },
        {
          title: "解决情况",
          key: "status",
          align: "center",
          width: 180
        }
      ],
      tableData: [],
      pageCount: 0,
      pageSize: 10
    };
  },
  methods: {
    renderChart() {
      this.loading.legalRate = true;
      this.option.legalRate = {
        legend: {
          top: "top",
          left: "center",
          orient: "horizontal",
          data: ["合规", "不合规"],
          textStyle: { fontSize: 12 },
          itemWidth: 12,
          itemHeight: 12
        },
        tooltip: { show: true, trigger: "item", formatter: "{a} - {b}:{c}%" },
        color: [this.COLORS[0], this.COLORS[7]].reverse(),
        series: [
          {
            name: "合规率",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"],
            data: [{name:'合规',value:97.11},{name:'不合规',value:2.89}],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}\n{c}%"
              }
            }
          }
        ]
      };
      let params = {
          pageIndex:0,
          pageSize:10
      }
      this.legalCount = 173
      this.$Crender('chart-legal-rate',this.option.legalRate)
      this.loading.legalRate = false
    },
    renderTable(index) {
        let params = {
            pageIndex:index,
            pageSize:this.pageSize
        }
        this.loading.table = true
        axios.get(this.URLHEAD_TA + 'PrewarningDetails',{params:params}).then(res=>{
            let json = res.data
            this.tableData = json.Data.map((o,i)=>{
                return {
                    index:i+1,
                    riskReason:o.cause,
                    systemName:'三重一大事项监管系统',
                    chargerName:o.roleName,
                    depName:o.department,
                    status:o.processState,
                    discoverTime:o.createTime
                }
            })
            this.pageCount = json.count
            this.loading.table = false
        })
    }
  },
  mounted() {
    this.renderChart();
    this.renderTable(0);
  }
};
</script>

<style lang="" scoped>
.chart{
    height:320px;
}
</style>